<!-- 柱状图主页面 -->
<template>
  <div class="screen-container">
    <div class="screen-body">

      <section class="screen-top">
        <div id="top-left">
            <button @click="goBack" class="backButton"></button>
        </div>
        <div id="top-middle">
          <Map :optionList="optionList" :mapStyle="mapStyle" title="原力值"></Map>
        </div>
        <div id="top-right">
        </div>
      </section>
      <section class="screen-bottom">
        <div id="bottom-container" >
           <Columnar :optionList="optionList" :mapStyle="mapStyle" title="原力值"></Columnar>
        </div>

      </section>
    </div>
  </div>
</template>

<script>
import Bus from "@/common/bus"
import Map from './map.vue'
import Columnar from './chart.vue'
export default {
  data() {
    return {
      optionList:[],
      mapStyle:{
        width:'800',
        height:'600',
        tooltip:true,
        zoom:1.5
      },
    }
  },
   methods: {
      // 返回上一页
      goBack() {
        this.$router.go(-1)
      },
    },
  created(){
    this.mapStyle.width = document.documentElement.clientWidth
    this.mapStyle.height = document.documentElement.clientHeight-66
  },
  components: {
    Map,
    Columnar
  },
  mounted(){
    Bus.$on('getOptionList', res =>{
      this.optionList = res
    })
  }
}
</script>
<style lang="scss" scoped>
// 全屏样式的定义

.screen-container {
  width: 100%;
  height: 100%;
  color: #c0c0c0;
  box-sizing: border-box;
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
   .screen-top {
    height: 70%;
    width: 100%;
    display: flex;
    justify-content: space-between;
     #top-left {
      height: 100%;
      width: 5%;
     }
     #top-middle {
      height: 100%;
      width: 50%;
      // background-color: #ffffff9b;
     }
     #top-right {
      height: 100%;
      width: 25%;
     }
   }
   .screen-bottom {
    height: 30%;
    width: 100%;
    #bottom-container {
      height: 100%;
      width: 100%;
    }
   }
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.backButton{
    margin: 10px 10px;
    width: 60px;
    height: 40px;
    background-image: url("@/assets/img/go-back.png");
    background-size: 100% 100%;
}
</style>
